@use "sass:map";
@use "sass:color";

$primary-color: $listenbrainz-blue;
$brainzplayer-height: 60px;
$brainzplayer-padding: 0px;
$cover-art-size: $brainzplayer-height - $brainzplayer-padding * 2;
$big-cover-art-size: 500px;
$progress-bar-height: 4px;
$progress-bar-hover-height: 8px;
$white-background: $white;
// Recommended minimum size required by Youtube
$youtube-player-height: 200px;
$youtube-player-width: 350px;
$youtube-button-size: 30px;
$youtube-resize-transition: height 0.25s ease-out;

#brainz-player {
  position: fixed;
  bottom: 0;
  right: 0;
  width: calc(100% - $sidenav-width);
  @media (max-width: $offscreen-sidenav-breakpoint) {
    width: 100%;
  }
  height: $brainzplayer-height;
  background: $white-background;
  display: flex;
  box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.2);

  padding: $brainzplayer-padding;
  border-top: 1px solid $hr-border-color;
  z-index: 110;

  > * {
    flex: 1;
  }

  .content {
    display: flex;
    overflow: hidden;
    .cover-art {
      min-width: $brainzplayer-height;
      height: 100%;
      flex: 0;
      margin-right: 1em;
      // Show big preview of the cover art when hovering over it
      @media (min-width: $offscreen-sidenav-breakpoint) {
        &:hover
          > *:not(.hidden):not(.no-album-art):not(.youtube-wrapper):not(.soundcloud) {
          height: min(80vw, $big-cover-art-size);
          width: min(80vw, $big-cover-art-size);
          bottom: $brainzplayer-height + $progress-bar-height;
          max-height: calc(100vh - $brainzplayer-height - $progress-bar-height);
        }
      }

      > * {
        height: $cover-art-size;
        width: $cover-art-size;
        position: absolute;
        // transition: height, width 0.4s;
        bottom: 0;
      }

      img {
        height: inherit;
        width: inherit;
        max-height: inherit;
        object-fit: cover;
      }

      // Youtube iframe and wrapper
      .youtube-wrapper {
        position: absolute;
        bottom: $brainzplayer-height + 10px;
        right: 10px;
        height: $youtube-player-height + $youtube-button-size;
        width: $youtube-player-width;
        max-width: calc(100vw - 20px);
        z-index: 4;
        text-align: right; // to align the move and reduce buttons
        transition: $youtube-resize-transition;

        &.reduced {
          height: $youtube-button-size;
          .youtube-player {
            height: 0;
          }
        }

        .youtube-player {
          height: $youtube-player-height;
          border-radius: 8px;
          border-top-right-radius: 0; // intersection with the square drag handle
          overflow: hidden;
          transition: $youtube-resize-transition;
          > * {
            height: inherit;
          }
        }

        .youtube-button {
          height: $youtube-button-size;
          min-width: $youtube-button-size;
          display: inline-block;
          background: color.change($black, $alpha: 50%);
          color: $white;
          + .youtube-button {
            margin-left: 0.5em;
          }
        }
        .youtube-drag-handle {
          cursor: grab;
          &:active {
            cursor: grabbing;
          }
        }
      }
    }
  }

  .controls {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    color: $primary-color;
    font-size: 1.2em;
    flex-grow: 0;

    .play {
      padding: 0 0.7em;
    }
    > * {
      transition: all 0.5s ease;
      background: none;
      &:hover {
        color: color.adjust($primary-color, $lightness: -10%);
      }
      &.disabled {
        color: $gray-600;
        pointer-events: none;
      }
    }
  }

  .currently-playing {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.3em;
    overflow: hidden;
    min-width: 160px;

    .track-name,
    .artist-name {
      text-transform: uppercase;
      font-weight: 400;
      margin: 0;
    }

    .track-name {
      font-size: 1.2em;
      letter-spacing: 2px;
      color: $dark-turquoise;
    }

    .artist-name {
      font-size: 0.8em;
      letter-spacing: 1.5px;
      color: color.adjust($dark-turquoise, $lightness: 15%);
      margin: 5px 0;
    }

    .ellipsis {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .ellipsis-2-lines {
      display: -webkit-box;
      line-clamp: 2;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .elapsed {
    display: flex;
    flex-direction: row;
    flex-grow: 0;
    align-items: center;
    padding: 1rem;
  }

  .actions {
    align-self: center;
    align-items: center;
    justify-content: flex-end;
    display: flex;

    /* Icons */
    > * {
      stroke-width: 40px;
      font-size: 1.3em;
      margin: 0 0.7em;
      max-width: 1em;
      cursor: pointer;
      color: $gray-600;
      &:hover {
        color: #46433a;
      }
      &.disabled {
        pointer-events: none;
        stroke: $gray-300 !important;
        color: $gray-300 !important;
      }
      &.music-service-icon {
        max-width: 1.5em;
        > svg {
          // Youtube forces us to follow their branding guidelines to the letter,
          // so we need to force a minimum height of 20px for the icon path inside the svg
          // [poo emoji]
          min-height: 26.7px;
          vertical-align: middle;
        }
      }
    }

    .love,
    .hate {
      color: transparent;
      stroke: $gray-600;
    }

    .love {
      &:hover {
        stroke: $love;
      }
      &.loved {
        stroke: transparent;
        color: $love;
      }
    }

    .hate {
      &:hover {
        stroke: $hate;
      }
      &.hated {
        stroke: transparent;
        color: $hate;
      }
    }

    .fa-ellipsis-vertical {
      //Thin down ellipsis icon
      stroke: $white-background;
    }
  }

  .no-album-art {
    height: 100%;
    background-image: url(../img/logo_big.svg);
    background-repeat: no-repeat;
    background-position: center top;
    background-color: aliceblue;
    opacity: 0.3;
  }

  .progress-bar-wrapper {
    flex: 0;
  }

  /* Mobile device styles */
  @media (max-width: map.get($grid-breakpoints, "sm")) {
    .content .cover-art {
      margin-right: 0.5em;
    }
    .controls {
      margin-left: 2em;
      .play {
        padding: initial;
      }
    }
    &.playing {
      .controls {
        margin-left: 0;
      }
      .actions {
        flex: 0;
        > .music-service-icon {
          max-width: 1em;
        }
      }
    }
  }
}

.dropup-content {
  // A lot of these styles are copied part from Bootstrap
  // and part from ListenBrainz (ListenCard).
  // We copy them so that we don't have to rely on them for a standalone package
  &.open {
    display: block;
  }
  display: none;
  position: absolute;
  min-width: 140px;
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.175);
  z-index: 6;
  border-radius: 4px;
  padding: 10px 0px;
  width: 260px;
  color: #46433a;

  //From Bootstrap styles
  top: auto;
  bottom: 100%;
  right: 0;
  margin-bottom: 2px;
  list-style: none; // In case the elements are <li> items inside a <ul>
  font-size: 14px;
  background-color: $white-background;
  border: 1px solid $hr-border-color; // IE8 fallback
  border: 1px solid rgba(0, 0, 0, 0.15);
  background-clip: padding-box;

  // Links within the dropdown menu
  > a,
  > button {
    display: block; // necessary for <a> tags
    width: 100%;
    background: none;
    color: inherit;
    border: none;
    padding: 5px 20px;
    font: inherit;
    cursor: pointer;
    outline: inherit;
    text-align: left;

    &:hover {
      color: $white-background;
      background-color: $orange;
    }
  }
}

#brainz-player .progress,
.music-player .progress {
  position: absolute;
  height: $progress-bar-height;
  top: -$progress-bar-height;
  margin-bottom: 0;
  left: 0;
  width: 100%;
  cursor: pointer;
  z-index: 5;
  transition: height, 0.2s;

  .progress-bar {
    height: 100%;
    background-color: $primary-color;
    border-right: 2px solid $dark-turquoise;
  }
  &:hover {
    height: $progress-bar-hover-height;
    top: -$progress-bar-hover-height;
  }

  .progress-tooltip {
    background: $primary-color;
    margin-top: -4px;
    border-radius: 24px;
    font-size: 1.2rem;
    padding: 6px 12px;
    &::before {
      display: none;
    }
  }
  & > ::after {
    border-color: transparent;
  }
}

.volume {
  position: fixed;
  z-index: 110;
  background-color: #f8f8f8;
  right: 17em;
  bottom: -12em;
  transition: bottom 0.5s ease-in-out;
  border-top: 1px solid #ccc;
  box-shadow: -6px -1px 10px rgba(0, 0, 0, 0.2);
  .volume-input {
    width: 3.5em;
    writing-mode: vertical-rl;
    direction: rtl;
    margin: 1.5em 0.6em;
  }
  &.show {
    bottom: $brainzplayer-height;
  }
  @media (max-width: map.get($grid-breakpoints, "sm")) {
    right: -6em;
    bottom: 6.5em;
    z-index: 112;
    transition-property: right;
    &.show {
      bottom: 6.5em;
      right: 1.5em;
    }
  }
}

.queue {
  position: fixed;
  padding: 1em;
  bottom: -100%;
  transition: bottom 1s ease-in-out;
  width: 100%;
  max-width: 550px;
  height: min(500px, 100vh);
  max-height: 100vh;
  background-color: #f8f8f8;
  border-top: 1px solid #ccc;
  box-shadow: -6px -1px 10px rgba(0, 0, 0, 0.2);
  overflow-y: auto;
  z-index: 109;
  right: 0;
  overscroll-behavior: contain;

  &.show {
    bottom: $brainzplayer-height;
    &.mobile {
      bottom: 0;
    }
  }

  .hide-queue {
    position: sticky;
    left: 100%;
    top: -15px;
    padding: 1em;
    margin: -15px 0 0;
    font-size: 1.5em;
    cursor: pointer;
    z-index: 1;
    border-radius: 5px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background: #dadada;

    @media (max-width: $offscreen-sidenav-breakpoint) {
      // Bigger touch target on mobile
      padding: 0.3em 1em;
      font-size: 1.6em;
    }
  }
  .queue-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
  }

  .queue-item-card .main-content .drag-handle {
    align-items: center;
    cursor: move;
    flex: 0;
    display: block;
    align-self: center;
    min-width: 3em;
  }

  .queue-headers {
    margin-top: 4px;
    margin-bottom: 4px;
    border-bottom: 1px solid #ccc;

    h4 {
      margin: 0;
      padding: 10px;
      padding-left: 0;
    }
  }
  .queue-buttons {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 1em;
  }
  // Negative top margin to remove gap with buttons above
  .queue-buttons + .queue-headers {
    margin-top: -30px;
  }
}

.music-player {
  --music-player-background: linear-gradient(to bottom, @blue, @orange);
  --music-player-text-color-1: white;
  --music-player-text-color-2: white;
  --music-player-accent-color: white;
  background: var(--music-player-background);
  color: var(--music-player-text-color-1);
  position: fixed;
  z-index: 111;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  display: flex;
  flex-direction: column;
  right: 0;
  bottom: -100vh;
  transition: bottom 0.6s cubic-bezier(0.46, 0.75, 0.55, 0.97);
  transition-property: bottom, background, color;
  padding: 0 1.5em;
  padding-bottom: $brainzplayer-height * 0.5;

  &.open {
    bottom: 0;
    + .queue {
      // When the music player is open, bring queu on top of it
      z-index: 112;
    }
  }

  > * {
    margin-block: auto;
  }

  .cover-art-scroll-wrapper {
    overflow-x: auto;
    scroll-snap-stop: always;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    display: flex;
    aspect-ratio: 1;
    margin-top: auto;
    margin-bottom: auto;

    .cover-art-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      scroll-snap-align: start;
      scroll-snap-stop: always;
      min-width: 100%;
      border-radius: 8px;
      overflow: hidden;
    }
  }

  .header {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 1em 0;
    position: relative;

    .hide-queue {
      position: absolute;
      left: 0;
      z-index: 1;
    }

    .header-text {
      flex: 1;
      text-align: center;
      padding-left: 3em;
      width: calc(100% - 3em);
    }
  }

  .info {
    .info-text-wrapper {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: auto;
    }
  }

  .love,
  .hate {
    stroke: currentColor;
    stroke-width: 3em;
    fill-opacity: 0;
  }

  .love {
    &:hover {
      stroke: $love;
    }
    &.loved {
      color: $love;
      fill-opacity: 1;
    }
  }

  .hate {
    &:hover {
      stroke: $hate;
    }
    &.hated {
      color: $hate;
      fill-opacity: 1;
    }
  }

  .text-scroll-wrapper {
    overflow: hidden;
    white-space: nowrap;

    span {
      display: inline-block;
      position: relative;

      &.animate {
        animation: leftright 6s infinite alternate linear;
        animation-delay: 6s;
      }
    }
  }

  .player-buttons {
    color: var(--music-player-text-color-2);
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-block: auto;

    .play svg {
      font-size: 4.25em !important;
    }
    &.secondary {
      margin-top: 1.2em;
    }
  }

  .progress-bar-wrapper {
    margin-top: 1em;
    .progress {
      position: inherit;
      height: 10px;
      border-radius: 10px;
      background-color: rgba(255, 255, 255, 0.3);

      .progress-bar {
        background-color: var(--music-player-accent-color);
      }
    }
    .progress-numbers {
      margin-top: 0.5em;
      display: flex;
      justify-content: space-between;
      .divider {
        display: none;
      }
    }
  }
  .dropup-content {
    top: 45px;
    bottom: unset;
  }
}

@keyframes leftright {
  0%,
  20% {
    transform: translateX(0%);
    left: 0%;
  }
  80%,
  100% {
    transform: translateX(-100%);
    left: 100%;
  }
}

// For cover art in alerts
$alert-thumbnail-size: 60px;

.brainzplayer-alert {
  display: flex;
  align-items: center;
  justify-content: center;
}
.alert-thumbnail {
  max-height: $alert-thumbnail-size;
  margin: -$alert-padding-x;
  margin-right: $alert-padding-x;
}

// Show the alert toasts above the player
.Toastify__toast-container--bottom-left,
.Toastify__toast-container--bottom-right {
  bottom: calc(1em + $brainzplayer-height);
}

// Custom styling for Funkwhale icon
svg.fa-funkwhale,
.fa-funkwhale {
  width: 1.3em !important;
  height: 1.3em !important;

  // Match the vertical alignment used by other music service icons
  vertical-align: text-bottom !important;

  // Default duotone colors for Funkwhale branding
  --fa-primary-color: #009fe3; // Blue arcs
  --fa-secondary-color: #3c3c3b; // dark whale fluke
  --fa-primary-opacity: 1;
  --fa-secondary-opacity: 1;
}

// When in a muted context, use currentColor to match other services
.text-muted svg.fa-funkwhale,
.text-muted .fa-funkwhale {
  --fa-primary-color: currentColor !important;
  --fa-secondary-color: currentColor !important;
  --fa-primary-opacity: 1 !important;
  --fa-secondary-opacity: 1 !important;
}

// Custom styling for Navidrome icon
svg.fa-navidrome,
.fa-navidrome {
  --fa-secondary-color: #0084ff; // Blue disc with transparent inner circle
  --fa-primary-color: #000000; // Black decorative rings and arcs
  --fa-secondary-opacity: 1;
  --fa-primary-opacity: 1;
}

// // When in a muted context, use currentColor to match other services
.text-muted svg.fa-navidrome,
.text-muted .fa-navidrome {
  --fa-primary-color: currentColor !important;
  --fa-secondary-color: currentColor !important;
  --fa-primary-opacity: 0.6 !important;
  --fa-secondary-opacity: 1 !important;
}
